<template>
    <div class="pagination">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="currentSize" :page-sizes="props.pageSizes"
            size="small" :disabled="disabled" background layout="total, sizes, prev, pager, next" :total="props.total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange">
        </el-pagination>
    </div>
</template>

<script setup name="PageInation">
import { defineProps, computed, defineEmits } from 'vue';
const emit = defineEmits(['pagination', 'update:page', 'update:pageSize'])
const props = defineProps({
    total: {
        type: Number,
        default: 0,
    },
    pageSizes: {
        type: Array,
        default() {
            return [10, 20, 30, 50, 100]
        },
    },
    pageSize: {
        type: Number,
        default: 10,
    },
    page: {
        type: Number,
        default: 1,
    },
})
const currentPage = computed({
    // 只读
    get() {
        return props.page
    },
    // 当计算属性进行修改的时候
    set(val) {
        emit('update:page', val)
    }
})
const currentSize = computed({
    // 只读
    get() {
        return props.pageSize
    },
    // 当计算属性进行修改的时候
    set(val) {
        emit('update:pageSize', val)
    }
})
// 一页显示多少条数据
const handleSizeChange = () => {
    emit('pagination')
}
// 显示的页码
const handleCurrentChange = () => {
    emit('pagination')
}
</script>

<style lang="scss" scoped>
.pagination {
    padding: 20px 0;
    display: flex;
    justify-content: flex-end;
}
</style>